<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>部门管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../../../css/public.css" media="all">
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">
				<fieldset class="layui-elem-field layuimini-search">
					<legend>搜索信息</legend>
					<div style="margin: 10px 10px 10px 10px">
						<form class="layui-form layui-form-pane" action="" id="searchFrm">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">部门名称</label>
									<div class="layui-input-inline">
										<input type="text" name="deptname" id="name" autocomplete="off" class="layui-input" placeholder="请输入部门名称">
									</div>
								</div>
								<div class="layui-inline" style="text-align: center;">
									<a class="layui-btn" lay-submit="" lay-filter="data-search-btn">
										<i class="layui-icon layui-icon-search"></i>搜索</a>
									<a class="layui-btn layui-btn-warm" lay-submit="" lay-filter="data-reset-btn">
										<i class="layui-icon layui-icon-refresh"></i>重置</a>
								</div>
							</div>
						</form>
					</div>
				</fieldset>

				<!--表格开始-->
				<!-- href=”javascript:void(0);”这个的含义是，让超链接去执行一个js函数，而不是去跳转到一个地址，而void(0)表示一个空的方法，也就是不执行js函数。 -->
				<a class="layui-btn layui-btn-sm btn-add" id="addDept" href="javascript:void(0)">
					<i class="layui-icon layui-icon-addition"></i>添加部门</a>
				<table class="layui-hide" id="deptTable"></table>
				<script type="text/html" id="spreadTpl">
					<input type="checkbox" name="spread" value="{{d.id}}" lay-skin="switch" lay-text="展开|不展开" lay-filter="spreadSwitch" {{ d.spread == 1 ? 'checked' : '' }}>
				</script>
				<script type="text/html" id="availableTpl">
					<input type="checkbox" name="available" value="{{d.id}}" lay-skin="switch" lay-text="可用|不可用" lay-filter="availableSwitch" {{ d.available == 1 ? 'checked' : '' }}>
				</script>

				<div style="display: none;" id="deptBar">
					<a class="layui-btn layui-btn layui-btn-xs btn-update" lay-event="update">编辑</a>
					<a class="layui-btn layui-btn-danger layui-btn-xs btn-delete" lay-event="delete">删除</a>
				</div>
				<!--表格结束-->

				<!--添加和修改的弹层开始-->
				<div id="addOrUpdateDiv" style="display: none; padding: 0.3125rem;">
					<form method="post" class="layui-form layui-form-pane" lay-filter="dataFilter" id="dataFrm">
						<div class="layui-form-item" id="div_pid">
							<div class="layui-inline">
								<label class="layui-form-label">父级部门</label>
								<div class="layui-input-inline">
									<input type="hidden" name="pid" id="pid" />
									<input type="text" name="pname" id="pname" autocomplete="off" readonly="readonly" class="layui-input"
									 placeholder="请选择父级部门">
								</div>
							</div>
							<div class="layui-inline" style="text-align: center;">
								<a class="layui-btn" lay-submit="" id="doSelectDept">
									<i class="layui-icon"></i>选择</a>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">部门名称</label>
							<div class="layui-input-block">
								<input type="hidden" name="id" />
								<input type="text" name="name" autocomplete="off" placeholder="请输入部门名称" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">部门备注</label>
							<div class="layui-input-block">
								<input type="text" name="remark" autocomplete="off" placeholder="请输入部门备注" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">地址</label>
							<div class="layui-input-block">
								<input type="text" name="address" autocomplete="off" placeholder="请输入地址" class="layui-input">
							</div>
						</div>
						<input type="hidden" id="ordernum" name="ordernum" autocomplete="off" class="layui-input">
						<div class=class="layui-form-item" style="text-align: center;">
							<a class="layui-btn" lay-submit="" lay-filter="doSubmit">
								<i class="layui-icon layui-icon-release"></i>立即提交</a>
							<a class="layui-btn layui-btn-warm" lay-submit="" lay-filter="dataFrm-reset-btn">
								<i class="layui-icon layui-icon-refresh"></i>重置</a>
						</div>
					</form>
				</div>
				<!--添加和修改的弹层结束-->
			</div>
		</div>


		<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
		<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
		<script src="../../../lib/common/selectLayer.js" charset="utf-8"></script>
		<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
		<script src="../../../lib/common/common.js" charset="utf-8"></script>

		<script>
			layui.use(['form', 'table', 'laydate', 'layer', 'treeTable'], function() {
				var $ = layui.jquery,
					form = layui.form,
					table = layui.table,
					laydate = layui.laydate,
					layer = layui.layer,
					treeTable = layui.treeTable;

				/**
				 * 加载 数据
				 */
				var tableIns = treeTable.render({
					elem: '#deptTable',
					title: '部门数据表',
					height: 'full-220',
					tree: {
						iconIndex: 0, // 折叠图标显示在第几列
						idName: 'id', // 自定义id字段的名称
						pidName: 'pid', // 自定义标识是否还有子节点的字段名称
						haveChildName: 'haveChild', // 自定义标识是否还有子节点的字段名称
						isPidData: true // 是否是pid形式数据
					},
					cols: [{
							field: 'name',
							title: '部门名称',
							align: "center"
						},
						{
							field: 'address',
							title: '地址',
							align: "center",
							width: 80
						},
						{
							field: 'remark',
							title: '部门备注',
							align: "center"
						},
						{
							field: 'createtime',
							title: '创建时间',
							align: "center"
						},
						{
							field: 'spread',
							title: '是否展开',
							align: "center",
							templet: '#spreadTpl'
						},
						{
							field: 'available',
							title: '是否可用',
							align: "center",
							templet: '#availableTpl'
						},
						{
							title: '操作',
							templet: '#deptBar',
							fixed: "right",
							align: "center",
							width: 220
						}
					],
					reqData: function(data, callback) {
						// 在这里写ajax请求，通过callback方法回调数据
						$.get(api + 'dept/loadAllDept', function(res) {
							callback(res.data); // 参数是数组类型
						});
					},
					page: false
				});

				/**
				 * 监听按钮操作
				 */
				form.on('switch(spreadSwitch)', function(obj) {
					$.post(api + 'dept/updateDept', {
						id: this.value,
						spread: obj.elem.checked ? 1 : 0
					}, function(res) {
						// layer.msg(res.msg)
					})
				});
				form.on('switch(availableSwitch)', function(obj) {
					$.post(api + 'dept/updateDept', {
						id: this.value,
						available: obj.elem.checked ? 1 : 0
					}, function(res) {
						// layer.msg(res.msg)
					})
				});

				/**
				 * 监听搜索操作
				 */
				form.on('submit(data-search-btn)', function(data) {
					var name = $("#name").val();
					if (name) {
						tableIns.filterData(name); // 根据关键字模糊搜索
					} else {
						tableIns.reload();
					}
				});

				/**
				 * 监听重置操作
				 */
				form.on('submit(data-reset-btn)', function(data) {
					$("#searchFrm")[0].reset(); // 清空搜索信息框中的数据
					tableIns.reload();
				});

				/**
				 * 监听行数据的事件
				 */
				treeTable.on('tool(deptTable)', function(obj) {
					var data = obj.data; // 获得当前行数据
					if (obj.event == 'delete') {
						$.get(api + 'dept/getDeptChildrenCountById', {
							id: data.id
						}, function(res) {
							if (res.data > 0) {
								layer.msg("当前部门有子部门，请先删除子部门");
							} else {
								layer.confirm('真的删除行么？', {
									icon: 3,
									title: '提示'
								}, function(index) {
									$.post(api + 'dept/deleteDept', {
											id: data.id
										},
										function(res) {
											if (res.code == 200) {
												tableIns.reload();
											}
											layer.msg(res.msg);
										})
									layer.close(index);
								});
							}
						})
					} else if (obj.event == 'update') {
						updateDept(data);
					}
				});

				/**
				 * 监听添加按钮的事件
				 */
				$("#addDept").click(function() {
					addDept();
				})

				/**
				 * 监听部门选择的按钮事件 
				 */
				$("#doSelectDept").click(function() {
					var pid = $("#pid").val();
					openDeptSelect(pid, function(id, name) {
						$("#pid").val(id);
						$("#pname").val(name);
					});
				})

				/**
				 * 打开部门的添加弹出层
				 */
				var mainIndex;
				var url; // 动态的url
				function addDept() {
					mainIndex = layer.open({
						type: 1,
						title: '添加部门',
						area: ['500px'],
						content: $("#addOrUpdateDiv"),
						success: function(index) {
							url = api + "dept/addDept";
							$("#dataFrm")[0].reset();
							$("#pid").val("");
							// 加载最大的排序码
							$.get(api + "dept/queryDeptMaxOrderNum", function(res) {
								$("#ordernum").val(res.data);
							})
						}
					})
				}

				/**
				 * 打开部门的编辑弹出层
				 */
				function updateDept(data) {
					mainIndex = layer.open({
						type: 1,
						title: '修改部门',
						area: ['450px'],
						content: $("#addOrUpdateDiv"),
						success: function(index) {
							if (data.pid == 0) {
								$("#div_pid").hide();
							} else {
								$("#div_pid").show();
							}
							url = api + "dept/updateDept";
							// 装载数据表格 	
							form.val("dataFilter", data);
							$.get(api + 'dept/getDeptById', {
								id: data.pid
							}, function(res) {
								$("#pname").val(res.data.name);
							})
						}
					})
				}


				/**
				 * 提交数据
				 */
				form.on('submit(doSubmit)', function(data) {
					var params = $("#dataFrm").serialize();
					$.post(url, params, function(res) {
						layer.msg(res.msg);
						if (res.code == 200) {
							tableIns.reload();
						}
						layer.close(mainIndex);
					})
					return false;
				});


			});
		</script>
		<script>

		</script>

	</body>
</html>
